<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>新增课程 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 新增或修改以下样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            background-color: #f4f7f6; /* 轻微的背景色 */
            display: flex; /* 使用Flexbox布局 */
        }

        .left-sidebar {
            /* 保持 header.html 中定义的侧边栏样式 */
            /* 示例，具体请参考您的 style.css */
            width: 250px; /* 侧边栏宽度 */
            background-color: #34495e; /* 侧边栏背景色 */
            color: #ecf0f1;
            /* height: 100vh; 如果侧边栏需要固定高度 */
            padding: 20px 0;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            flex-shrink: 0; /* 防止侧边栏缩小 */
        }

        .main-content {
            flex-grow: 1; /* 主内容区域占据剩余所有空间 */
            padding: 20px;
            overflow-y: auto; /* 如果内容过多，允许滚动 */
        }

        /* 保持原有的表单样式，并进行微调 */
        .form-container {
            max-width: 700px; /* 稍微增加宽度，以容纳更多内容 */
            margin: 0 auto; /* 在 main-content 内部居中 */
            padding: 25px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group textarea,
        .form-group select { /* 确保select也有相同样式 */
            width: calc(100% - 22px); /* Adjust for padding and border */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1em;
            box-sizing: border-box; /* Include padding and border in the element's total width */
        }
        .form-group textarea {
            resize: vertical; /* Allow vertical resizing for textareas */
            min-height: 80px;
        }
        .form-actions {
            margin-top: 20px;
            text-align: right;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            margin-left: 10px;
            transition: background-color 0.3s ease;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        .message {
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 0.95em;
        }
        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .success-message {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        /* 图片预览样式 */
        #imagePreview {
            margin-top: 10px;
            text-align: center;
            display: none; /* 默认隐藏 */
        }
        #previewImage {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

    </style>
</head>
<body>

<div th:replace="~{fragments/header ::header}"></div>

<div class="main-content">
    <div class="form-container">
        <h2>新增课程</h2>

        <div th:if="${errorMessage}" class="error-message message">
            <p th:text="${errorMessage}"></p>
        </div>
        <div th:if="${successMessage}" class="success-message message">
            <p th:text="${successMessage}"></p>
        </div>

        <form th:action="@{/course/create}" th:object="${course}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="couName">课程名称:</label>
                <input type="text" id="couName" th:field="*{couName}" required>
            </div>

            <div class="form-group">
                <label for="couIntroduction">课程简介:</label>
                <textarea id="couIntroduction" th:field="*{couIntroduction}"></textarea>
            </div>

            <div class="form-group">
                <label for="couPic">课程封面图片:</label>
                <input type="file" id="couPic" name="couPicFile" accept="image/*">
                <div id="imagePreview" style="display: none;">
                    <img id="previewImage" src="" alt="图片预览">
                </div>
            </div>

            <div class="form-group">
                <label for="couPrice">课程价格 (积分):</label>
                <input type="number" id="couPrice" th:field="*{couPrice}" min="0" required>
            </div>

            <div class="form-group">
                <label for="couParTypeId">课程父类别:</label>
                <select id="couParTypeId" th:field="*{couParTypeId}">
                    <option value="">请选择父类别</option>
                    <option value="1">编程</option>
                    <option value="2">设计</option>
                    <option value="3">管理</option>
                </select>
            </div>

            <div class="form-group">
                <label for="couTypeId">课程子类别:</label>
                <select id="couTypeId" th:field="*{couTypeId}">
                    <option value="">请选择子类别</option>
                    <option value="101">Java</option>
                    <option value="102">Python</option>
                    <option value="201">UI/UX</option>
                    <option value="301">项目管理</option>
                </select>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">提交</button>
                <a th:href="@{/course/manage}" class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>

<script th:inline="javascript">
    // 图片预览逻辑
    document.getElementById('couPic').addEventListener('change', function(event) {
        const [file] = event.target.files;
        if (file) {
            const previewImage = document.getElementById('previewImage');
            const imagePreview = document.getElementById('imagePreview');
            previewImage.src = URL.createObjectURL(file);
            imagePreview.style.display = 'block';
        } else {
            document.getElementById('imagePreview').style.display = 'none';
            document.getElementById('previewImage').src = '';
        }
    });

    // 自动隐藏消息提示
    document.addEventListener('DOMContentLoaded', function() {
        const errorMessage = document.querySelector('.error-message');
        const successMessage = document.querySelector('.success-message');

        if (errorMessage) {
            setTimeout(() => {
                errorMessage.style.opacity = '0';
                errorMessage.style.transition = 'opacity 1s ease-out';
                setTimeout(() => errorMessage.remove(), 1000);
            }, 5000); // 5秒后消失
        }
        if (successMessage) {
            setTimeout(() => {
                successMessage.style.opacity = '0';
                successMessage.style.transition = 'opacity 1s ease-out';
                setTimeout(() => successMessage.remove(), 1000);
            }, 5000); // 5秒后消失
        }
    });
</script>
</body>
</html>